<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="box">你好</div>
    <div style="width:1px;height:600px;background:black;position:absolute;left:1000px;top:0px;"></div>
</body>

</body>

</html>
<script>
    //一.缓冲运动
    //1.通过定时器让一个物体运动起来。
    //2.设置缓冲速度，离目标点越远速度越大。(越来越小的速度)
    //3.封装缓冲运动 - 当前的运动只能改变left.
    //4.通过getStyle函数，让带有px单位的属性都可以运动


    //获取任意的css属性值-带单位
    function getStyle(obj, attr) { //obj:元素对象  attr:属性名称
        if (window.getComputedStyle) { //支持：标准浏览器。
            return window.getComputedStyle(obj)[attr];
        } else { //非标准，IE浏览器
            return obj.currentStyle[attr];
        }
    }
    //缓冲运动的封装。
    let timer = null; //定时器的返回值。
    let speed = 0; //初始速度
    function bufferMove(obj, attr, target) { //obj:元素对象 attr:css属性名  target:目标
        clearInterval(timer); //清除前面的定时器
        timer = setInterval(() => {
            //获取改变的css属性值。
            let currentValue = parseInt(getStyle(obj, attr)); //获取当前的属性值。

            //求速度：越来越小的速度
            speed = (target - currentValue) / 10; //速度，如果速度是整数，向上取整，否则向下取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (currentValue === target) { //到了目标点，让运动停止。
                clearInterval(timer);
            } else { //没到目标点，继续运动
                obj.style[attr] = currentValue + speed + 'px'; //不断获取当前值+5再赋值
            }
        }, 1000 / 60);
    };


    const box = document.querySelector('.box');
    box.onclick = function() {
        bufferMove(box, 'fontSize', 100);
    };




    // alert(getStyle(box, 'fontSize')); //12px  有单位
</script>